<template>
  <div class="editor">
    <div ref="editor" class="textNeirong"></div>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, onBeforeUnmount, ref, reactive } from 'vue'
import E from 'wangeditor'
import {upload} from '@/api/common'

export default defineComponent({
  name: 'DialogAlert',
  setup(props, { emit }) {
    const editor = ref()
    const content = reactive({
      html: ''
    })

    let instance
    onMounted(() => {
      instance = new E(editor.value)

      instance.config.uploadImgShowBase64 = false // base 64 存储图片
      instance.config.uploadImgMaxSize = 8 * 1024 * 1024 // 将图片大小限制为 2M
      instance.config.uploadImgMaxLength = 6 // 限制一次最多上传 6 张图片
      instance.config.uploadImgTimeout = 3 * 60 * 1000 // 设置超时时间
      instance.config.pasteFilterStyle = false  // 关闭粘贴的样式过滤

      // 自定义 onchange 触发的延迟时间，默认为 200 ms
      instance.config.onchangeTimeout = 1000 // 单位 ms

      // 文件内容变化监听
      instance.config.onchange = function (newHtml) {
        console.log(newHtml)
        content.html = newHtml
      };

      // 自定义上传
      instance.config.customUploadImg = async (files, insert) => { 
        console.log(files)
       
        // // 转成base64
        // var reader = new FileReader();
        // var AllowImgFileSize = 2100000; //上传图片最大值(单位字节)（ 2 M = 2097152 B ）超过2M上传失败
        // var imgUrlBase64;
        // files.forEach(item=> {
        //   //将文件以Data URL形式读入页面  
        //   imgUrlBase64 = reader.readAsDataURL(item)
        //   console.log(imgUrlBase64)
        //   reader.onload = function (e) {
        //     //var ImgFileSize = reader.result.substring(reader.result.indexOf(",") + 1).length;//截取base64码部分（可选可不选，需要与后台沟通）
        //     if (AllowImgFileSize != 0 && AllowImgFileSize < reader.result.length) {
        //       alert('上传失败，请上传不大于2M的图片！')
        //       return
        //     } else {
        //        insert( reader.result)
        //     }
        //   }
        // })

        /* files 是 input 中选中的文件列表 */ 
        let formData = new FormData()

        files.forEach(item=> {
          formData.append('files', item)
        })


        // 上传
        let {data} = await upload(formData)
        /* insert 是编辑器自带的 获取图片 url 后，插入到编辑器的方法 上传代码返回结果之后，将图片插入到编辑器中*/ 
        if(data.code === 200) {
          let urlData = data.url
          console.log(urlData)
          sessionStorage.setItem('paths', JSON.stringify(urlData))
          urlData.forEach(element => {
            insert(element.url)
          }); 
        }
      } 
      
      instance.create()
    })

    // 组件卸载之前销毁editor
    onBeforeUnmount(() => {
      instance.destroy()
      instance = null
    })

    // 设置内容
    const syncHTML = (html) => {
      instance.txt.html(html)
    }

    return {
      syncHTML,
      editor,
      content
    }
  }
})
</script>

<style lang="scss" scoped>
</style>
